<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>视频邀请</title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/flexible.min.js"></script>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				background: #e4e4e4;
			}
			
			.mui-content {
				width: 100%;
				height: 100%;
				position: relative;
				background: #292929;
			}
			.bg-video{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}
			.people-img {
				position: relative;
				top: 2.4rem;
				margin: 0 auto;
				text-align: center;
				z-index: 1;
			}
			
			.people-img img {
				width: 3.466666rem;
				height: 3.466666rem;
				border-radius: 100%;
				border: 1px solid #FD698D;
			}
			
			.people-name {
				color: #FFFFFF;
				font-size: 0.453333rem;
				margin-bottom: 0;
				margin: 0.4rem 0 0.56rem 0;
			}
			
			.people-wait {
				font-size: 0.453333rem;
			}
			
			.hua {
				position: fixed;
				bottom: 15%;
				width: 100%;
				display: flex;
				padding: 0 0.426666rem;
				justify-content: space-around;
			}
			
			.hua-button {
				width: 3.125rem;
				height: 1.25rem;
			}
			
			.lvse {
				color: #1ce83f;
				margin-top: 30px;
				font-size: 0.3rem;
			}
			
			.yaoqing {
				font-size: 0.48rem;
				font-family: "微软雅黑";
				color: #000;
				margin-bottom: 0;
				margin-top: 1.173333rem;
				text-align: center;
			}
			
			p {
			    color: #ccccd0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" v-cloak>
			<video v-show="surl!='' && show" muted autoplay playsinline webkit-playsinline :src="surl" class="bg-video"></video>
			<div class="people-img">
				<img id="per_img" :src="headimg" />
				<p class="people-name">{{nick_name}}</p>
				<p class="people-wait">来自<span id="per_name">{{nick_name}}</span>的语音邀请</p>
			</div>
			<div class="hua">
				<div class="hua-left">
					<img id="jie" src="../../img/hello/tyjt_03.png" class="hua-button hua-jiet" v-on:click="jieting"/>
				</div>
				<div class="hua-right">
					<img id="close" src="../../img/hello/tygd_03_03.png" class="hua-button hua-guad" v-on:click="guaduan"/>
				</div>
			</div>
		</div>
		<audio id="audio" loop="loop">'
			<source src="../../img/audio/b.mp3" type="audio/mpeg"></source>
			<source src="../../img/audio/b.mp3" type="audio/ogg"></source>
		</audio>
		<audio id="audio2">'
			<source src="../../img/audio/c.mp3" type="audio/mpeg"></source>
			<source src="../../img/audio/c.mp3" type="audio/ogg"></source>
		</audio>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				mui.back = function() {
					music.pause();
					plus.webview.close(self, "none");
				};
				
				var vs = new Vue({
					el:'.mui-content',
					data:{
						nick_name: self.name,
						headimg: self.headimg,
						surl:'',
						show:false
					},
					methods:{
						jieting:function(){
							if(isvipcoin(false)){
								music.pause();
								music2.play();
								mui.toast('对方已挂断');
								setTimeout(function() {
									mui.back()
								}, 1000)
								return;
							}
							mui.toast('VIP会员可免费接听！');
							music.pause();
							music2.play();
							setTimeout(function() {
								openWallet('wallet.html',2)
								setTimeout(function() {
									mui.back()
								}, 1000)
							}, 500);
						},
						guaduan:function(){
							mui.toast('已取消！')
							music.pause();
							music2.play();
							setTimeout(function() {
								mui.back()
							}, 1000)
						}
					}
				})
				mui.getJSON(getApiUrl('http://www.jiaoyou0.cn', 'userdata/shipin'),{uid:self.uid},function(data){
						if(data.code==200){
							vs.surl = data.data;
						}
					}
				);
				plus.device.vibrate(2000);
				var music = document.getElementById("audio");
				var music2 = document.getElementById("audio2");
				music.play();
				var b = random_x(2, 6);
				setTimeout(function() {
					music.pause();
					music2.play();
					mui.toast('对方已挂断');
					mui.back()
				}, b * 10000)
				
				var md=document.getElementsByTagName("video")[0];
			    md.addEventListener("ended",function(){
			        setTimeout(function(){vs.surl = ''},500)
			    })
			    md.addEventListener("playing",function(){
			        vs.show = true
			    })
				function random_x(min, max) {
					return Math.floor(min + Math.random() * (max - min))
				}
			});
		</script>
	</body>

</html>